<template>
	<view class="con-box">
		<navBar title="选择环数"></navBar>
		
			<view class="top-search">
				<!-- @blur="fnQueryByNum" -->
				<u-search placeholder="请输入关键字" :showAction="false" v-model="keyword" @search="fnQueryByNum" @change="fnQueryByNum" @clear="fnClearSearch"></u-search>
				<view class="all-btn" @click="selectAllNum">全选</view>
			</view>
			<scroll-view scroll-y="true" :style="{height:scrollHeight}">
				<view style="padding: 40rpx 50rpx 0 50rpx;">
					<u-checkbox-group class="pd_check" v-model="checkboxValue7" @change="checkboxChange"  :borderBottom="true" placement="column"
						iconPlacement="right">
						<u-checkbox  :customStyle="{marginBottom: '16px'}" v-for="(item, index) in numList" :key="item"
							:label="item" :name="item" :checked="isSelect(item)" >
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</scroll-view>


		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="saveUser"  class="button-primary">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				tempArr: [],
				numList: [],
				checkboxValue7: [],	// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
				selectNums: [],
				itemIndex:-1 ,//url上的参数
				
				newData:[],   //禁用的
				selectData:[], //默认选中的
				keyword:'',	//搜索框的值
			}
		},
		watch: {

		},
		onLoad(option) {
			if(option){
				// 得到当前点进来的数组元素下标
				this.itemIndex = option.index;
				this.numList = JSON.parse(option.data)
				//复制一份数据筛选时清空用
				this.copyNumList = JSON.parse(option.data)
				this.checkboxValue7 = JSON.parse(option.tempArr).map(item=>String(item))
				console.log(this.itemIndex, this.numList, 'onLoad46行')
				//和被打开页面进行通信的实例
				this.eventChannel = this.getOpenerEventChannel();
			}

		},
		
		computed:{
			scrollHeight() {
				// #ifdef APP-PLUS || H5
					return `calc(100vh - 400rpx)`
				// #endif
				
				// #ifdef MP-WEIXIN
					return `calc(100vh - 460rpx)`
				// #endif
			}
		},
		methods: {
			...mapMutations('selectRings', ["setSelectRingData", "addData",'deleteDataForIndex', 'insertChangeData']),

			isSelect(num){
				// let data = this.tempArr.filter(it => this.tempArr.some(key => key == num));
				return this.checkboxValue7.includes(String(num))
				// console.log(data,'70行')
			},

			saveUser() {
				if(this.selectNums.length === 0) {
					uni.showToast({
						title:'请先编辑数据再保存!',
						icon:'none',
						mask:true
					})
					return
				}
				uni.navigateBack({
					success:() =>{
						console.log(this.selectNums, '0000');
						this.eventChannel.emit("getData",{
							data: {
								list:this.selectNums,
								index:Number(this.itemIndex)
							}
						})
					}
				});

			},
			checkboxChange(n) {
				this.selectNums = n
				console.log('change', n);
				
			},
			//头部搜索框事件
			fnQueryByNum(val) {
				let copyList = this.numList.map((it,idx) => ({
					id:idx+1,
					num:it+''
				}))
				this.numList = copyList.filter(item => item.num.indexOf(val) !== -1).map(it => String(it.num))
				if (!val) {
					this.fnClearSearch()
				}
			},
			//清空事件
			fnClearSearch() {
				this.numList = [...this.copyNumList]
			},
			//全选按钮事件
			selectAllNum() {
				this.selectNums = this.checkboxValue7 = this.numList
			}

		}
	}
</script>

<style lang="scss" scoped>
	.con-box {
		/* #ifdef MP-WEIXIN */
			padding-top:180rpx
		/* #endif */
	}
	.gb-scroll-box {
		.scroll-item {
			background-color: #fff;
			border-top: 40rpx solid #F5F7FAFF;
			padding: 0 40rpx 0;

		}

		.list-box {

			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid purple;
			}

			.right-box {
				padding: 12rpx;
				border-radius: 14rpx;
			}

			.list-box-item {
				align-items: end;
				padding: 40rpx 0 30rpx;
				border-bottom: 1px solid #F5F7FAFF;
			}

			.list-box-item:last-child {
				border-bottom-width: 0rpx;
			}

			.name {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #22204E;
				line-height: 42rpx;
			}

			.time {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #72708D;
				margin-top: 20rpx;
			}
		}
	}

	.btn-group {
		height: 100rpx;
		.btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			position: fixed;
			bottom: 0;
		}
	}
	.pd_check{
		// padding: 0 40rpx;
	}
	.top-search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		position: sticky;
		top: 120rpx;
		z-index: 20;
		.all-btn {
			margin-left: 40rpx;
			width: 120rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			border-radius: 10rpx;
			border: 1px solid black;
			color: black;
			background-color: #fff;
		}
	}
</style>
